import type { Interpolation, Theme } from "@emotion/react";
import type { FC, PropsWithChildren } from "react";

export const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
	return (
		<div css={styles.container}>
			<div css={styles.border} />
			<span css={styles.content}>{children}</span>
			<div css={styles.border} />
		</div>
	);
};

const styles = {
	container: {
		display: "flex",
		alignItems: "center",
	},
	border: (theme) => ({
		borderBottom: `2px solid ${theme.palette.divider}`,
		width: "100%",
	}),
	content: (theme) => ({
		paddingTop: 4,
		paddingBottom: 4,
		paddingRight: 16,
		paddingLeft: 16,
		fontSize: theme.typography.h5.fontSize,
		color: theme.palette.text.secondary,
	}),
} satisfies Record<string, Interpolation<Theme>>;
